<!--  -->
<template>
  <div>

    <el-tabs tab-position="left" v-model="tabsNameInve" @tab-click="handlTabsInve"
      v-if="conditionsInve.length > 0">
      <el-tab-pane v-for="(item) in conditionsInve" :key="item.name" :label="item.label"
        :name="item.name">
      </el-tab-pane>
      <el-checkbox-group v-model="checkListData.list"
                         :disabled="$route.query.type == 2"
        @change="(val)=>{handlGroup(val,checkListData.index)}">
        <ul class="ul">
          <li v-for="(item,index) in InvestigationList" :key="index + ';'">
            <el-checkbox :label="item.id">{{item.inspect_type_name}}</el-checkbox>
          </li>
        </ul>
      </el-checkbox-group>
    </el-tabs>

  </div>
</template>

<script>
import { Investigation } from "@/api/stability/giveUp";
export default {
  props: {
    conditionsInve: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },

  data() {
    return {
      checkListData: {
        index: "",
        list: []
      },
      tabsNameInve: "aa",
      tabsIndex:0,
      InvestigationList: [],
      conditions: [],
      inspect_types: []
    };
  },
  //是计算属性，也可以理解为一个方法。
  computed: {},
  //属性是手动定义的所需监听的值
  watch: {
    conditionsInve: {
      handler: function(newV, oldV) {
        if (!this.checkListData.name) {
          this.checkListData = newV[0];
          this.tabsNameInve = newV[0].name;
        } else {
          let index = newV.findIndex(a => a.name == this.checkListData.name);
          if (index == -1) {
            if (newV.length) {
              this.checkListData = newV[0];
            } else {
              this.checkListData = { index: "", list: [] };
            }
          }
        }
      },
      deep: true
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    Investigation().then(res => {
      if (res.code === 200) {
        this.InvestigationList = res.data || [];
      }
    });
  },
  //是Vue实例对象上绑定的方法，供当前Vue组件作用域内使用，
  methods: {
    //设置考察tabs
    handlTabsInve: function(val) {

      let index = this.conditionsInve.findIndex(a => a.name == val.name);
      if (index != -1) {
        let data = this.conditionsInve[index];
        this.checkListData = data;
      }
      this.tabsNameInve = val.name;
      this.tabsIndex = val.index;
      this.sucess();

    },

    //设置考察类型多选事件
    handlGroup: function(val, index) {
      var self = this;
      if (val.length > this.checkListData.conditions.length) {
        let label1 = "",name1 = "",inspect_type = {};
        for (let i = 0; i < val.length; i++) {
          let index33 = this.checkListData.conditions.findIndex(
            a => a.name === val[i]
          );
          if (index33 == -1) {
            let index44 = this.InvestigationList.findIndex(
              a => a.id === val[i]
            );
            if (index44 !== -1) {
              name1 = val[i];
              label1 = this.InvestigationList[index44].inspect_type_name;
              inspect_type = this.InvestigationList[index44]
            }
            break;
          }
        }
        let a = {
          label: label1,
          name: name1,
          list: [],
          conditions:[]
        };
        let b = {
          inspect_type:inspect_type,
          place_conditions_infos: []
        };
        self.checkListData.conditions.push(a);
        self.checkListData.inspect_types.push(b);
      } else {
        let id2;
        for (let i = 0; i < this.checkListData.conditions.length; i++) {
          let index44 = val.findIndex(a => a == a.name);
          if (index44 === -1) {
            id2 = i;
            break;
          }
        }
        self.checkListData.conditions.splice(id2, 1);
        self.checkListData.inspect_types.splice(id2, 1);
      }
      self.checkListData.list = val;
      this.sucess();
    },

    sucess: function() {
      this.$emit("sucess", this.tabsIndex);
    }
  }
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.ul {
  margin: 0;
  padding: 0;
}
.ul li {
  height: 40px;
  line-height: 40px;
}
.ul li:hover {
  background-color: rgb(248, 248, 248);
  cursor: pointer;
}
.el-card {
  height: 260px;
}
::v-deep .el-tabs__item {
  width: 130px;
  text-align: center !important;
}
</style>
